import React from 'react'

import '@/assets/css/index.css'
import '@/assets/css/swiper-bundle.min.css'
import '../assets/css/content.css'
import Menu from '@/components/Common/Menu'
import { HeartOutline, HeartFill } from 'antd-mobile-icons'


const Home = () => {

    let [coupon, SetCoupon] = React.useState([])
    let [room, SetRoom] = React.useState([])
    let [page, SetPage] = React.useState(1)
    let [hasMore, SethasMore] = React.useState(true)
    let ref = React.useRef(null)
    let [keywords, SetKey] = React.useState('')
    const navigate = React.Router.useNavigate()

    const [business,SetBusiness] = React.useState(React.Cookie.load('business') ? React.Cookie.load('business') : {})

    React.useEffect(() => {
        CouponData()
        RoomData()
    }, [])

    // 下拉刷新
    const onRefresh = async () => {
        SetPage(1)
        SetRoom([])
        SethasMore(true)
        RoomData()
    }

    // 上拉加载
    const loadMore = async () => {
        RoomData()
    }

    // 优惠券信息
    const CouponData = async () => {
        var result = await React.HTTP.post('/coupon/list');

        if (result.code == 0) {

        } else {
            SetCoupon(result.data)
        }
    }


    // 轮播图优惠券
    const Coupon = coupon.map((item: any, key) => {
        return (
            <React.UI.Swiper.Item key={key}>

                <div className="content" onClick={() => navigate(`coupon/info?cid=${item.id}`)} >
                    <React.UI.Image src={item.thumb_text} fit='contain' />
                </div>

            </React.UI.Swiper.Item>
        )

    })

    const search = async (e: any) => {
        // 阻止表格默认事件
        e.preventDefault()
        onRefresh()
        return false
    }


    // 房间信息
    const RoomData = async () => {
        var data = {
            page: page,
            keywords: keywords,
            busid: business.id
        }
        var result = await React.HTTP.post('/room/list', data)

        if (result.code == 0) {
            SethasMore(false)
            return false
        } else {
            SetPage(page + 1)
            SetRoom(room.concat(result.data))
            
        }
    }


    // 收藏
    const Collect = async (roomid: any) => {
        // console.log(roomid)
        if(!business.id){
            React.error('请先登录',() => {})
            return false
        }

        var result = await React.HTTP.post('/collect/add',{busid: business.id, roomid: roomid})

        if(result.code == 0){
            React.error(result.msg,() => {})
            return false
        }else{
            React.success(result.msg,() => {onRefresh()})
        }
    }



    return (
        <>
            {/* 导航 */}
            <div className="top">
                <div>首页</div>
            </div>

            {/* 轮播图的优惠券 */}
            <React.UI.Swiper
                loop
                autoplay
            >
                {Coupon}
            </React.UI.Swiper>

            <form className="hotel_search" onSubmit={search.bind(this)}>
                <input type="text" value={keywords} onChange={(e) => SetKey(e.target.value)} placeholder="请输入关键词搜索" />
                <div className="screen_icon">
                    <img src="./assets/images/screen.png" alt="" />
                </div>
            </form>

            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <div className="hotellist">
                    {room.map((item: any, key) => (
                        <div className="item" key={key}>
                            <div className="collect" onClick={() => {Collect(item.id)}}>
                                    {item.collect ? <HeartFill color='var(--adm-color-danger)' fontSize={36} /> : <HeartOutline color='var(--adm-color-weak)' fontSize={36} />}
                                </div>
                            <React.Router.Link to={`/room/info?rid=${item.id}`}>
                                
                                <div className="type_name">{item.flag_text[0]}</div>
                                <div className="images">
                                    <div className="swipers">
                                        <img src={item.thumb_text} />
                                    </div>
                                    <div className="title">{item.name}</div>
                                </div>
                                <div>
                                    <div className="item_top">
                                        {item.flag_text && item.flag_text.map((flag: any, index: any) => <span key={index}>{flag}</span>)}


                                    </div>

                                </div>
                            </React.Router.Link>
                            <div className="item_bot">
                                <div className="font">
                                    <span className="price">￥{item.price}/晚</span>
                                </div>
                                <div className="btn" onClick={() => { navigate(`/room/confirm?rid=${item.id}`) }}>立即预定</div>
                            </div>
                        </div>
                    ))}

                </div>
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />
            </React.UI.PullToRefresh>

            <Menu />
        </>
    )
}

export default Home;